<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>{{ floorName }}-楼层预览</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div class="imgBox" id="map_point">
          <img :src="mapSrc" alt="" id="myBiaoZhu">
          <!--      坐标点位 -->
          <div class="point-list" v-for="(item,index) in banMa" :key="index"
               :style="{left:item.point[0]+'px',top:item.point[1]+'px'}">
            <!-- 监控坐标警报  -->
            <div class="iconfont iconshipinjiankongicon" v-if="item.type==2" @click="showVideoFn(item)"
                 @mouseover="item.showpouper= true" @mouseout="item.showpouper = false">
              <div class="pouperBox" v-show="item.showpouper">
                <div class="pouperBox-box">
                  <p>设备名称:{{ item.deviceName }}</p>
                  <p>设备IP: {{ item.ip }}</p>
                  <!--                  1、视频移动报警 2、视频录像报警 3、视频丢失报警 4、输入端口报警 5、输出端口报警 6、视频遮挡报警-->
                  <p>设备状态: <span
                      :style="{'color': item.fail_type?'red':'green'}">{{
                      item.fail_type ? (item.fail_type == 1 ? '视频移动报警' : (item.fail_type == 2 ? '视频录像报警' : (item.fail_type == 3 ? '视频丢失报警' : (item.fail_type == 4 ? '输入端口报警' : (item.fail_type == 5 ? '输出端口报警' : '视频遮挡报警'))))) : '正常'
                    }}</span>
                  </p>
                  <p v-if="item.fail_type>0">操作：<el-button @click.stop="repairFn(index)" size="mini">修复</el-button></p>
                </div>
              </div>
              <!--              1、视频移动报警2、视频录像报警3、视频丢失报警4、输入端口报警5、输出端口报警6、视频遮挡报警-->
              <div class="domContainer">
                <div class="dot"></div>
                <div class="pulse warningBg" v-if="item.fail_type>0"></div>
                <div class="pulse-big warningColor" v-if="item.fail_type>0"></div>
                <div class="pulse successBg" v-if="item.status==1&&item.fail_type==0"></div>
                <div class="pulse-big successColor" v-if="item.status==1&&item.fail_type==0"></div>
              </div>
            </div>
            <!--            文字名称-->
            <div class="point-text" v-if="item.type==1">
              <span>{{ item.name }}</span>
            </div>
            <!--            区角位置-->
            <!--            <div class="domContainer_corner" v-if="item.type==3">-->
            <!--              <div class="dot"></div>-->
            <!--              <div class="pulse successBg"></div>-->
            <!--              <div class="pulse-big successColor"></div>-->
            <!--            </div>-->
            <div class="iconfont icontiyuyundongchangsuo" v-if="item.type==3">
              <div class="pouperBox">
                <div class="pouperBox-box">
                  <p>{{ `区角名称:${item.corner.name ? item.corner.name : '未知'}` }}</p>
                  <!--                  <p>在线人数: 0</p>-->
                  <!--                  <p>操作：<el-button @click="closePOpup" size="mini">确定</el-button></p>-->
                </div>
              </div>
              <div class="domContainer">
                <div class="dot"></div>
                <div class="pulse warningBg" v-if="item.status!==1"></div>
                <div class="pulse-big warningColor" v-if="item.status!==1"></div>
                <div class="pulse successBg" v-if="item.status==1"></div>
                <div class="pulse-big successColor" v-if="item.status==1"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">取消</el-button>
        <el-button @click="saveMap" size="small" type="primary">确定</el-button>
      </div>
    </div>
    <previewVideo :visible.sync="videoVisible" :videoIp="videoIp"></previewVideo>
  </div>
</template>

<script>
import previewVideo from "./previewVideo";

export default {
  props: ['visible', 'floorId', 'floorName', 'mapPic'],
  components: {
    previewVideo
  },
  data() {
    return {
      dialogVisible: false,
      mapSrc: '',
      banMa: {},
      proportionX: 0, // 比例 x
      proportionY: 0, // 比例 y
      imageOption: [0, 0],
      mapPoint: [], // 保存坐标
      videoVisible: false,
      videoIp: '',
      setTime: ''
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.mapSrc = this.$BASE_URL + this.mapPic
        this.loadImage()
      } else {
        this.banMa = {}
        clearInterval(this.setTime)
      }
    }
  },
  created() {
  },
  methods: {
    loadImage() {
      // let banMaData = {
      //   positionLat: 984.95,
      //   positionLng: 70.97,
      // }
      let n = this;
      let nImg = new Image();
      nImg.src = this.mapSrc;
      nImg.onload = function () {
        n.imageOption[0] = nImg.width;
        n.imageOption[1] = nImg.height;
        // 单前图片尺寸
        let myImg = document.querySelector("#myBiaoZhu");
        let currWidth = myImg.clientWidth;
        let currHeight = myImg.clientHeight;
        n.proportionX = (currWidth / nImg.width)// 比例 681 147 .toFixed(2)
        n.proportionY = (currHeight / nImg.height)// 比例 681 147
        console.log('原始图片尺寸：', nImg.width + " " + nImg.height)
        console.log('目前的宽高：', currWidth, currHeight)
        console.log('比例：', (currWidth / nImg.width))
        // console.log('banMaData.positionLat*currWidth:', parseFloat(banMaData.positionLat) * parseFloat(currWidth))
        // console.log(parseFloat(banMaData.positionLat))
        // console.log(parseFloat(n.proportionX))
        // 请求楼层数据内容
        n.getMapAllPointFn()
        // if(n.pointInfo.point){
        //   n.banMa.push({
        //     positionLat: parseFloat(n.pointInfo.point[0]) * parseFloat(n.proportionX),
        //     positionLng: parseFloat(n.pointInfo.point[1]) * parseFloat(n.proportionY),
        //   })
        // }
        // n.mapInitFn()
      }

    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    saveMap() {
      if (!this.mapPoint.length) {
        this.$message.error('点击地图图层选择坐标')
        return
      }
      this.$emit('getPoint', this.mapPoint)
      this.closePOpup()
    },
    async getMapAllPointFn() {
      let n = this;
      let option = {p: 0, map_id: this.floorId}
      let data = await this.$fetch(this.api.floor.pointIndex, option);
      if (!data.code) {
        console.log('楼层数据', data)
        let MapPointList = {};
        for (let i in data.list) {
          console.log('index:', i)
          let dataOption = JSON.parse(data.list[i].data)
          let array_ = {
            id: data.list[i].id,
            type: data.list[i].type,
            name: dataOption.name,
            fail_type: data.list[i].fail_type,
            point: [
              parseFloat(dataOption.point[0]) * parseFloat(n.proportionX),
              parseFloat(dataOption.point[1]) * parseFloat(n.proportionY)
            ],
            corner: dataOption.corner,
            deviceName: dataOption.deviceName,
            showpouper: false,
            ip: dataOption.ip,
            status: Number(i) === 3 ? 0 : 1, // 1正常 0异常
          }
          // this.banMa.push(array_)
          MapPointList[data.list[i].id] = array_
        }
        this.banMa = this.getJson(MapPointList)
        console.log('this.banMa:', this.banMa)
        this.getMessageFn()
      }
    },
    mapInitFn() {
      // this.doDraw(floorOption)
      document.getElementById("myBiaoZhu").oncontextmenu = e => {
        if (e && e.preventDefault) {
          //阻止默认浏览器动作(W3C)
          e.preventDefault();
        } else {
          //IE中阻止函数器默认动作的方式
          window.event.returnValue = false;
        }
        return false;
      }; //阻止冒泡行为和默认右键菜单事件
      // console.log(196, this.parseImgUr == undefined);
      document.getElementById("myBiaoZhu").onmousedown = e => {
        e = e || window.event;
        // console.log(this.serialNumber);
        // console.log(this.serialNumber.length);
        // debugger;
        // if (this.serialNumber.length == 0 && this.parseImgUrl.length > 0) {
        //   // console.log(this.banMa.length);
        //   this.$refs.selectEquipment.visible = true;
        //   this.$refs.selectEquipment.formConfig.isShowSubmitBtn = true;
        //   return false;
        // }
        if (e.button !== 2) {
          this.banMa = []
          //判断是否右击
          /*
        event.screenX是屏幕左上角到鼠标当前位置的x轴距离;
        event.clientX是浏览器左上角到鼠标当前位置的x轴距离;
        event.setoffX是鼠标当前点击控件左上角到鼠标当前位置的x轴距离;
        */
          let x = e.offsetX || e.layerX;
          let y = e.offsetY || e.layerY;
          let myImg = document.querySelector("#myBiaoZhu");
          let currWidth = myImg.clientWidth;
          let currHeight = myImg.clientHeight;
          // var ProportionWidthInImg = x / currWidth;
          // var ProportionHeightInImg = y / currHeight;
          // console.log("图片比例高度："+ProportionHeightInImg)
          // console.log("图片比例宽度："+ProportionWidthInImg)
          this.banMa.push({
            id: this.banMa.length + 1,
            positionLat: x,
            positionLng: y,
          });
          this.mapPoint = [(x / this.proportionX).toFixed(2), (y / this.proportionY).toFixed(2)]
          window.localStorage.setItem('mapPoint', JSON.stringify(this.banMa))
          // this.createMarker(x, y);
        }
      };
    },
    getJson(option){
      return JSON.parse(JSON.stringify(option))
    },
    showVideoFn(option) {
      if (!option.ip) {
        this.$confirm('该设备未定义IP?', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          type: 'warning'
        }).then(() => {
        }).catch(() => {
        });
      } else {
        this.videoIp = option.ip;
        this.videoVisible = true;
      }
    },
    getMessageFn() {
      let n = this;
      this.setTime = setInterval(() => {
        n.getNewsFn()
      }, 2000)
    },
    getNewsFn() {
      let n = this;
      this.$fetch(this.api.floor.fail, {}).then(data => {
        if (!data.code) {
          for (let i in data.list){
            if(n.banMa[data.list[i].id]){
              n.banMa[data.list[i].id].fail_type = data.list[i].fail_type
            }
          }
        }
      })
    },
    // 修复内容
    repairFn(index){
      let n =this;
      this.$post(this.api.floor.repair, {id: n.banMa[index].id}).then((response) => {
        if (!response.code) {
          n.banMa[index].fail_type = 0;
        } else {
          this.$message.error(response.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  },
  mounted() {

  },
  // 离开当前页面后执行
  destroyed: function () {
    clearInterval(this.setTime)
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 90%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  /*padding: 20px;*/
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

#map_point {
  position: relative;
}

#map_point img {
  display: block;
  width: 100%;
}

.point-list {
  position: absolute;
  width: 0;
  height: 0;
}

.point-list .iconfont {
  font-size: 42px;
  color: #1e94ff;
  margin-right: 0;
  cursor: pointer;
  position: relative;
  top: -42px;
  left: -20px;
}

.domContainer {
  position: absolute;
  top: 5px;
  left: 12px;
}

.domContainer_corner {
  position: relative;
  top: -10px;
  left: -10px;
}

.domContainer_corner .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7ac0f7;
  position: absolute;
  left: 4px;
  top: 5px;
}

/*警报*/
.pulse {
  /*background: rgba(239, 45, 2, 0.8) !important;*/
  -webkit-animation: warn 0.9s ease-out;
  -moz-animation: warn 0.9s ease-out;
  animation: warn 0.9s ease-out;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  /*box-shadow: 1px 1px 30px #EF2D02;*/
}

.pulse, .pulse-big {
  position: absolute;
  width: 50px;
  height: 50px;
  /*border: 2px solid #EF2D02;*/
  /*background: rgba(239, 45, 2, 0.8);*/
  border-radius: 50%;
  /*z-index: 100;*/
  opacity: 0;
  top: -15px;
  left: -16px;
}

.warningColor {
  border: 2px solid #EF2D02;
  background: rgba(239, 45, 2, 0.8);
}

.warningBg {
  background: rgba(239, 45, 2, 0.8) !important;
  box-shadow: 1px 1px 30px #EF2D02;
}

.successBg {
  background: rgb(68, 255, 0) !important;
  box-shadow: 1px 1px 30px #14b500;
}

.successColor {
  border: 2px solid #EF2D02;
  background: rgba(239, 45, 2, 0.8);
}

@keyframes warn {
  0% {
    -moz-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  100% {
    -moz-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

.text-red {
  width: 2px;
  height: 2px;
  background: red;
}

.point-text {
  display: flex;
  justify-content: center;
}

.point-text span {
  white-space: nowrap;
  color: #000;
  font-weight: bold;
}

.pouperBox-box {
  width: 170px;
  height: 100px;
  background: #c2e5ff;
  border: 2px solid #c2e5ff;
  border-radius: 7px;
  position: relative;
  padding: 6px;
}

.pouperBox-box p {
  color: #000;
  font-size: 14px;
}

.pouperBox-box::before {
  content: '';
  width: 0;
  height: 0;
  border: 14px solid;
  position: absolute;
  bottom: -30px;
  left: 65px;
  border-color: #c2e5ff transparent transparent;
}

.pouperBox {
  position: absolute;
  top: -105px;
  left: -61px;
  z-index: 1;
  box-shadow: 0 0 10px #333;
  border-radius: 7px;
}
</style>


